PageIndicators: extend the clickable area

Replace the inactive spacing with clickable padding inside the
buttons, for easier selection with a mouse.

https://bugzilla.gnome.org/show_bug.cgi?id=707314

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 8afa98bac79d4c90ad0a8b23031763c0eddbc51a..971957321ecce8d352c4d022a78536ee5a140fd9 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -942,21 +942,20 @@ StScrollBar StButton#vhandle:active {
 }
 
 .page-indicator {
+    padding: 15px 30px;
+}
+
+.page-indicator .page-indicator-icon {
     width: 18px;
     height: 18px;
     background-image: url(page-indicator-inactive.svg);
 }
 
-.page-indicator:hover,
-.page-indicator:checked{
+.page-indicator:hover .page-indicator-icon,
+.page-indicator:checked .page-indicator-icon {
     background-image: url(page-indicator-active.svg);
 }
 
-.page-indicators {
-    spacing: 30px;
-    padding: 0px 30px;
-}
-
 .no-frequent-applications-label {
     font-size: 18pt;
     color: #999999;

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index c1e44dc473b759e87a0b3d18b78de82caa6bb693..bc4afee4052444f4cc715b5e1b88afcd158eb45d 100644 (file)
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -211,6 +211,7 @@ const PageIndicators = new Lang.Class({
                                                              St.ButtonMask.THREE,
                                                 toggle_mode: true,
                                                 checked: pageIndex == this._currentPage });
+                indicator.child = new St.Widget({ style_class: 'page-indicator-icon' });
                 indicator.connect('clicked', Lang.bind(this,
                     function() {
                         this.emit('page-activated', pageIndex);